<template>
  <view class="container">
    <view class="list">
      <navigator hover-class="none" :url="'/pages/article_detail/article_detail?id=' + item.id" class="box" v-for="(item, index) in list" :key="index">
        <view :class="['sort', index < 3 ? 'index' + (index + 1) : '']">{{ index + 1 }}</view>
        <view class="title">{{ item.title }}</view>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      pagesize: 20,
    };
  },

  onLoad: function () {
    this.articleList();
  },

  methods: {
    onReachBottom() {
      this.articleList(this.page + 1);
    },

    // 项目列表
    articleList: function (incPage = 0) {
      var page = incPage ? incPage : this.page;

      uni.showLoading({
        title: '数据加载中...',
        mask: true
      })

      this.$http.post('/index/Api/articleList', {
        page: page,
        pagesize: this.pagesize
      }).then((res) => {
        if (res.data.result == 1) {
          if (page == 1) {
            this.list = res.data.data;
          } else {
            // 加载更多
            var list = this.list;

            for (var i = 0; i < res.data.data.length; i++) {
              list.push(res.data.data[i]);
            }

            this.list = list;
            this.page = page;
          }

          setTimeout(() => {
            uni.hideLoading();
          }, 500)
        } else {
          if (page == 1) this.list = [];

          uni.hideLoading();
          this.$common.doErrorResult(res);
        }
      })
    },
  },
}
</script>

<style lang="scss">
page {
  background: #fff;
}

.container {
  padding: 20rpx;

  .list {
    .box {
      display: flex;
      margin-top: 40rpx;

      .sort {
        font-size: 24rpx;
        padding: 2rpx 10rpx;
        border-radius: 10rpx;
        background: #8C8888;
        color: #FFF;
        margin-right: 30rpx;
      }

      .index1 {
        background: #B574FF;
      }

      .index2 {
        background: #32A4FF;
      }

      .index3 {
        background: #FF8132;
      }

      .title {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

}
</style>

